/*
 * @Title: 登陆tabbar组件
 * @Created by: gsjPC 
 */
<template>
	<view class="uni-tab-bar">
		<!-- 顶部tab切换 -->
		 <view id="tab-bar" class="uni-swiper-tab dlTab">
		 	<view v-for="(tab,index) in tabBars" 
			:key="index"
			 class="swiper-tab-list" 
			 :class="tabIndex==index ? 'active' : ''"
		 	 :data-current="index" 
			 @click="tapTab(index)">{{tab.name}}</view>
		 </view>
		 <!-- 切换内容 -->
		 <view :current="tabIndex" 
		 class="tab-content" 
		 :duration="300" 
		 >
		 <login-con v-if="tabIndex == 0"></login-con>
		 <registe-con v-if="tabIndex == 1"></registe-con>
		 </view>
	</view>
</template>

<script>
	import loginCon from '@/pages/login/loginCon'
	import registeCon from '@/pages/login/registeCon'
	export default {
		components:{
			loginCon,
			registeCon
		},
		data() {
			return {
				tabIndex: 0 ,//默认选中第一个tab 
				tabBars:[
					{name:'登录'},
					{name:'注册'}
				],
			};
		},
		methods:{
			tapTab(index){
				
				this.tabIndex = index;
			},
		}
	}
</script>

<style>
.dlTab{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top:32upx;
	margin-bottom: 154upx;
}
.dlTab > view{
	flex: 1;
	text-align: center;
	font-size: 28upx;
	color: #333333;
	line-height: 54upx;
}
.dlTab .active{
	border-bottom: 3upx solid #5691FF;
}
</style>
